<!-- <div class="w-full flex justify-start p-4">
  <ngm-search [formControl]="searchControl" />
</div> -->

<nav class="min-h-full content-start gap-4 px-4 pt-4 grow shrink-0 pb-4 overflow-auto"
  ngmDynamicGrid colWidth="280"
  box="content-box"
  >
  <ngm-card-create
    [title]=" 'PAC.Knowledgebase.AddKnowledgebase' | translate: {Default: 'Add knowledgebase'} "
    [helpTitle]="'PAC.Knowledgebase.AddKnowledgebaseHelp' | translate: {Default: 'Learn more about custom knowledgebases'}"
    helpUrl="/docs/ai/knowledgebase/"
    description="Import your own text, pdf, markdown, word data."
    (create)="newKnowledgebase()"
  />

  @for (item of knowledgebases(); track item.id) {
    <div class="ngm-card min-h-[160px] flex-1 flex flex-col p-4 group bg-gray-50 hover:bg-white">
      <button class="ngm-card__menu transition-opacity h-8 w-8 rounded-md border-none opacity-0 group-hover:opacity-100" displayDensity="cosy"
        #mt="cdkMenuTriggerFor"
        [cdkMenuTriggerFor]="menu"
        [cdkMenuTriggerData]="{item: item}"
        [class.active]="mt.isOpen()">
        <i class="ri-more-line"></i>
      </button>

      <div class="flex-1">
        <div class="flex items-start gap-2">
          <!-- <pac-avatar class="shrink-0 w-10 h-10 rounded-xl overflow-hidden" [avatar]="item.avatar" /> -->
          <emoji-avatar [avatar]="item.avatar" class="shrink-0 rounded-md overflow-hidden shadow-sm" />

          <div class="flex flex-col items-start overflow-hidden">
            <p class="text-xs flex items-center text-token-text-secondary opacity-80">
              @if (item.permission === KnowledgebasePermission.Public || item.permission === KnowledgebasePermission.Organization) {
                <mat-icon class="mr-1 scale-75" displayDensity="compact" fontSet="material-icons-round">public</mat-icon> {{ 'PAC.Knowledgebase.Permission_Public' | translate: {Default:'Public'} }}
              } @else {
                <mat-icon class="mr-1 scale-75" displayDensity="compact" fontSet="material-icons-round">lock</mat-icon> {{ 'PAC.Knowledgebase.Permission_Private' | translate: {Default:'Private'} }}
              }
            </p>
            <div class="max-w-full font-bold text-base truncate" [title]="item.name">{{item.name}}</div>
          </div>

        </div>

        <div class="w-full pt-2 text-sm font-thin overflow-hidden line-clamp-3 text-text-secondary" [title]="item.description">
          {{item.description}}
        </div>
        
      </div>

      <div class="flex justify-between items-end">
        <pac-user-profile-inline [user]="item.createdBy" small class="mt-2" />

        <a class="inline-block cursor-pointer" (click)="openKnowledgebase(item.id)">
          <button
            class="flex items-center gap-2 px-4 py-2 font-sans text-xs font-bold text-center whitespace-nowrap text-zinc-600 uppercase align-middle transition-all rounded-lg select-none disabled:opacity-50 disabled:shadow-none disabled:pointer-events-none
              hover:bg-gray-900/10 active:bg-gray-900/20 hover:text-zinc-800
              dark:text-zinc-200 dark:hover:bg-neutral-700 dark:active:bg-neutral-500"
            type="button">
            {{'PAC.KEY_WORDS.Open' | translate: {Default: 'Open'} }}
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
              stroke="currentColor" class="w-4 h-4">
              <path stroke-linecap="round" stroke-linejoin="round" d="M17.25 8.25L21 12m0 0l-3.75 3.75M21 12H3"></path>
            </svg>
          </button>
        </a>
      </div>
    </div>
  }
</nav>

<ng-template #menu let-item="item">
  <div class="ngm-cdk-menu p-2" cdkMenu>
    <button cdkMenuItem class="ngm-cdk-menu-item p-1" (click)="edit(item)">
      <i class="ri-pencil-line mr-1"></i>
      <span>
        {{ 'PAC.ACTIONS.Edit' | translate: {Default: "Edit"} }}
      </span>
    </button>

    <button cdkMenuItem ngmAppearance="danger" class="ngm-cdk-menu-item p-1" (click)="remove(item)">
      <i class="ri-delete-bin-line mr-1"></i>
      <span>{{ 'PAC.ACTIONS.Delete' | translate: {Default: "Delete"} }}</span>
    </button>
  </div>
</ng-template>
